<template>
  <div class="app-container">


      <el-form  label-width="80px" style="width: 500px" >
            <el-form-item label="工程名称">
            <el-input v-model="name1"></el-input>
            </el-form-item>
            <el-form-item label="工程名称">
            <el-input v-model="name2"></el-input>
            </el-form-item>
        </el-form>



    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="showChart()">查询</el-button>
    </el-form>

    



    <div class="chart-container">       
      <div id="chart" class="chart" style="height:700px;width:100%" />
    </div>
  </div>
</template>
<script>
//import echarts from 'echarts'
import * as echarts from 'echarts';

export default {
    data() {
        return {
            name1:'',
            name2:''
            
        }
    },
    created(){
        
          

      },

    methods:{
        showChart(){
           this.setChart()
        },
    
        setChart() {
            // 基于准备好的dom，初始化echarts实例
            this.chart = echarts.init(document.getElementById('chart'))
            // console.log(this.chart)

            // 指定图表的配置项和数据
            var option = {
                title : {
                    text: '图表',
                    subtext: '纯属虚构'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:[this.name1,this.name2,]
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:this.name1,
                        type:'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:this.name2,
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 500],
                        markPoint : {
                            data : [
                                {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                                {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };
                    

            this.chart.setOption(option)
        }
    }
}
</script>
